<template>
    <section class="transfer">
        <el-dialog width="55%" :visible.sync="isShow" :fullscreen="fullscreen" :show-close="false" top="40px" :before-close="beforeClose">
            <el-row slot="title">
                <el-col :span="10" style="padding-top: 5px">
                    <span>添加成员</span>
                </el-col>
                <el-col :span="2" :offset="11">
                    <el-button type="text" v-if="!fullscreen" icon="iconfont ali-quanping" @click="fullscreen = true" style="float: right"></el-button>
                    <el-button type="text" v-else icon="iconfont ali-zuixiaohua" @click="fullscreen = false" style="float: right"></el-button>
                </el-col>
                <el-col :span="1">
                    <el-button type="text" icon="iconfont ali-guanbi" @click="parentCloseEvent" style="float: right"></el-button>
                </el-col>
            </el-row>
            <section>
                <el-row>
                    <el-col :span="11">
                        <div class="tree_transfer" v-loading="treeList.length == 0">
                            <el-tree :data="treeList" show-checkbox node-key="id" @check-change="nodeClick" 
                            :render-after-expand="false" ref="checkedNote">
                                <span slot-scope="{ node, data }">
                                    <i class="iconfont ali-wenjianjia1" v-if="!data.must"></i>
                                    <i v-else>
                                        <img :src="data.portrait" width="25" v-if="data.portrait">
                                        <i class="iconfont ali-touxiang" v-else></i>
                                    </i>
                                    <span>{{ node.label }}</span>
                                    <span v-show="!data.must && data.children.length > 0 && data.num != 0">({{data.num}}人)</span>
                                </span>
                            </el-tree>
                        </div>
                    </el-col>
                    <el-col :span="11" :offset="2">
                        <div class="tree_transfer _user">
                            <el-row v-for="user in userList" :key="user.id" style="background-color:#fff;padding: 5px 0 5px 15px">
                                <el-col :span="5" style="padding-top: 6px">
                                    <img :src="user.portrait" width="25" v-if="user.portrait">
                                    <i class="iconfont ali-touxiang" v-else></i>
                                </el-col>
                                <el-col :span="16" style="padding-top:6px">
                                    <span>{{user.label}}</span>
                                </el-col>
                                <el-col :span="3">
                                    <el-button type="text" @click="remove(user)" icon="iconfont ali-close" style="margin-top:-3px"></el-button>
                                </el-col>
                            </el-row>
                        </div>
                    </el-col>
                </el-row>
            </section>
            <section slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveObj">保 存</el-button>
                <el-button @click="parentCloseEvent">取 消</el-button>
            </section>
        </el-dialog>
    </section>
</template>
<script>
/* 测试树形穿梭框 */
import { dept_listAll } from '@/api/group'
import { mapGetters } from 'vuex'
import { formateGroupTree } from '@/utils/formateWelfare'; 

export default {
    name: "transfer",
    props:{
      isShow: Boolean,
    },
    data() {
        return {
            fullscreen: false,
            treeList: [],
            userList: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        };
    },
    computed:{
        ...mapGetters([
            'menuDeptList'
        ])
    },
    methods: {
        beforeClose(e){
            this.$emit('closeTransfer');
        },
        parentCloseEvent(){
            this.$emit('closeTransfer');
        },
        openTransfer(){
            this.userList = [];
            this.treeList = [];
            this.getDeptsAndUsers();
        },
        remove(e){
            this.userList.splice(this.userList.indexOf(e),1)
            this.$refs.checkedNote.setChecked(e.id,false)
            setTimeout( () => {
                this.userList.pop()
            }, 10);
        },
        nodeClick(e){
            
            let key = this.$refs.checkedNote.getCheckedKeys();
            if(e.must){
                if(this.userList.indexOf(e) < 0){
                    this.userList.push(e)
                }else{
                    this.userList.splice(this.userList.indexOf(e),1)
                }
            }
        },
        saveObj(){//提交保存
            if(this.userList.length == 0){
                this.$message.warning('请至少选择一位成员')
                return ;
            }
            this.$emit('getMembers',this.userList);
        },
        async getDeptsAndUsers(){
            let { data } = await dept_listAll({company_id : localStorage.getItem('companyId')});
            let formateTree = formateGroupTree(data.data.rows);
            this.treeList = formateTree;
        }
    },
    created(){
    }
}
</script>
<style lang="scss" scoped>
.transfer {
    z-index: 9999;
}
.tree_transfer{
    background-color: #F3F4F5;
    padding: 10px;
    border-radius: 5px; 
    img{
        border-radius: 50%;
    }
}
._user{
    max-height: 450px;
    overflow: scroll;
}
.ali-wenjianjia1 {
    color: #b8e8ff;
}
</style>
